<template>
  <div class="header">
    <span>
      <router-link v-if="title!='我的单词本'" :to="back">
        <img src="../../assets/back.png" width="100%" />
      </router-link>
    </span>
    {{title}}
    <span class="remember">
      <router-link v-if="title=='我的单词本'" to="/remember">记忆</router-link>
    </span>
    <span class="addword">
      <router-link v-if="title=='我的单词本'" to="/addword">添加单词</router-link>
    </span>
  </div>
</template>

<script>
export default {
  name: "Header",
  props: ["title", "back"]
};
</script>

<style scoped>
.header {
  height: 44px;
  background: #0bcdf0;
  color: #ffffff;
  line-height: 44px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  position: fixed;
  top: 0;
  width: 100%;
}

.header img {
  width: 20px;
}

.header span {
  flex: 0 0 100px;
  font-size: 14px;
}

.header a {
  color: #ffffff;
  text-decoration: none;
}
.remember{
    position: absolute;
    width: 30px;
    left: 15%;
    
}
</style>